<!DOCTYPE html>
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <title>内容</title>
     <link rel="stylesheet" href="{% static 'css/semantic.css' %}"  media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">


        <style type="text/css">
            h1 {
                font-family:'Oswald', sans-serif!important;
                font-size:40px;
            }

            body {
                font-family: 'Raleway', sans-serif;
            }
            p {
                font-family: 'Raleway', sans-serif;
                font-size:18px;
            }
            .ui.vertical.segment.masthead {
                height: 300px;
                background: url({% static 'images/star_banner.jpg' %});
                background-size: cover;
                background-position: 100% 80%;
            }

            .ui.container.segment {
                width: 800px;
                height 800px;
            }

            .ui.center.aligned.header.blogslogon {
                margin-top: 40px;
            }

            .ui.center.aligned.header.blogslogon p {
                margin-top: 10px;
                color: white;
                font-size: 10px;
            }
            .ui.container.nav {
                width: 500px;
            }

        </style>
</head>
<body>
<div class="ui  container segment">


                <div class="ui container vertical segment">
                    <a href="#">
                        <!--上面是超链接-->
                        <h1 class="ui header">
                            {{ aritcle.headline }}
                        </h1>
                    </a>

                    <!--<i class="icon grey small unhide">10,000</i>-->
                    <p>
                        <!--下面采用了过滤器超过100个字就不会显示-->
                        {{ aritcle.content }}
                        <!--<a href="#">-->
                            <!--<i class="angle tiny double grey right icon">修改文章</i>-->
                        <!--</a>-->
                    </p>

                    <!--<div class="ui mini  tag label">-->
                        <!--life-->
                    <!--</div>-->
                </div>

        </div>
</body>
</html>